<script setup lang="ts">
import ClanInfo from './component/clanInfo.vue'
import ActivityTabs from './component/ActivityTab.vue'
import MemberGallery from './component/MemberGallery.vue'
import CultureSection from './component/CultureSection.vue'
import clanDescription from './component/clanDescription.vue'
import clanTools from './component/clanTools.vue'
import clanConcil from './component/clanConcil.vue'
</script>

<template>
  <div class="clan-main-container">
    <el-row :gutter="20"  class=" px-4 mx-auto" >
      <!-- 左侧 -->
      <el-col :span="11">
        <ClanInfo />
      </el-col>
      <!-- 中间 -->
      <el-col :span="8">
        <clanDescription/>

        <clanTools mt-4/>
      </el-col>
      <!-- 右侧 -->
      <el-col :span="5">
        <clanConcil/>
      </el-col>
    </el-row>

     <MemberGallery mt-6 />

    <CultureSection mt-10 />

    <ActivityTabs mt-10 />
  </div>
</template>

<style lang="scss" scoped>
.clan-main-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23deb887' fill-opacity='0.1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
  padding: 2.5rem 0;
  font-family: 'SimSun', '宋体', 'Microsoft YaHei', sans-serif;
  
 
}

/* 全局卡片样式 */
.el-card {
  border: 1px solid #a9a9a9;
  border-radius: 1rem !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #e74c3c, #964b00);
  }
}
</style>